import React, { useMemo } from 'react';
import { Input, AutoComplete, Popover } from 'antd';

import { QuestionCircleOutlined, } from '@ant-design/icons';

import { INodeComponent } from './type';

const autoOptions = [
    { value: '@Callerid', label: '@Callerid' },
    { value: '@Calleeid', label: '@Calleeid' },
    { value: '@OriCalleeid', label: '@OriCalleeid' },
    { value: '@CRS', label: '@CRS' },
    { value: '@LineNo', label: '@LineNo' },
    { value: '@CurTimeStamp', label: '@CurTimeStamp' },
    { value: '@IsEof', label: '@IsEof' },
    { value: '@LastError', label: '@LastError' },
    { value: '@Loginflag', label: '@Loginflag' },
    { value: '@WorkID', label: '@WorkID' },
    { value: '@GroupID', label: '@GroupID' },
    { value: '@agccount', label: '@agccount' },
    { value: '@freeagccount', label: '@freeagccount' },
    { value: '@queuelen', label: '@queuelen' },
    { value: '@Pa', label: '@Pa' },
    { value: '@Pb', label: '@Pb' },
]


const renderPopverContent = () => {
    return <div>
        <p style={{ marginBottom: '0px' }}>@CurTimeStamp:&nbsp;&nbsp;当前时间字符型，格式: 20030904102030 2003年9</p>
        <p style={{ marginBottom: '0px' }}>@LineNo:&nbsp;&nbsp;通道号整型</p>
        <p style={{ marginBottom: '0px' }}>@IsEof:&nbsp;&nbsp;记录集是否已经到是后整型不是1是</p>
        <p style={{ marginBottom: '0px' }}>@LastError:&nbsp;&nbsp;上次操作的成败标志整型0成功1失败</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对于外呼操作0-呼出成功，对方已经摘机</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 -对方占线</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2-至号</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3-无响应(电路不通)</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4-无人应普</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5 -对方拒绝</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6-超时</p>
        <p style={{ marginBottom: '0px' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7 -未知原因失败</p>
        <p style={{ marginBottom: '0px' }}>@Callerid:&nbsp;&nbsp;主叫号码</p>
        <p style={{ marginBottom: '0px' }}>@Calleeid:&nbsp;&nbsp;被叫号码</p>
        <p style={{ marginBottom: '0px' }}>@crs:&nbsp;&nbsp;呼山流水号</p>
        <p style={{ marginBottom: '0px' }}>@loginflag:&nbsp;&nbsp;坐席注册标志</p>
        <p style={{ marginBottom: '0px' }}>@workid:&nbsp;&nbsp;坐席工号</p>
        <p style={{ marginBottom: '0px' }}>@groupid:&nbsp;&nbsp;坐席组号</p>
        <p style={{ marginBottom: '0px' }}>@oriCalleeid:&nbsp;&nbsp;原始被叫号码</p>
        <p style={{ marginBottom: '0px' }}>@PA:&nbsp;&nbsp;通用变量A</p>
        <p style={{ marginBottom: '0px' }}>@PB:&nbsp;&nbsp;通用变量B</p>
    </div>
}

const renderPopver = (remarkList: any[], topologyType: string) => {
    return <>
        {
            topologyType === 'call' ?
                <Popover placement="leftTop" title={'系统参数说明'} content={renderPopverContent()}>
                    <QuestionCircleOutlined />
                </Popover>
                : null
        }
        {
            remarkList?.length > 0 ?
                <Popover placement="leftTop" title={'参数说明'} content={renderAutoContent(remarkList)}>
                    <QuestionCircleOutlined />
                </Popover>
                : null
        }
    </>
}

const renderAutoContent = (remarkList: any[]) => {
    return <div>
        {
            remarkList.map((item, index) => {
                return <p style={{ marginBottom: '0px' }} key={index}>{index + 1}、{item ? item : '--'}</p>
            })
        }
    </div>
}

export const NodeAutoInput: React.FC<INodeComponent> = (props) => {

    const data = useMemo(() => {
        return props?.data
    }, [props?.data])



    const onInputChange = (e: any) => {
        let value = e.target.value

        if (value && props.onChange) {
            props.onChange(value)
        }
    }

    return (
        <AutoComplete
            options={autoOptions}
            onSelect={(e) => {
                if (e && props.onChange) {
                    props.onChange(e)
                }
            }}
            value={props.value ?? ''}
        >
            <Input
                onChange={onInputChange}
                value={props?.value ?? ''}
                addonAfter={
                    <>
                        {
                            (() => {
                                let remarkList = data?.autoList?.map((i: any) => i?.remark)
                                return (
                                    <>
                                        {renderPopver(remarkList, 'call')}
                                    </>
                                )
                            })()
                        }
                    </>
                }
                placeholder={`请填写${data.labelName}`}
            />
        </AutoComplete>
    )
}